<template>
	<view>
		<uv-vtabs :chain="true" :list="cates" :current="index" :height="height"
			:barItemActiveStyle="{ textAlign: 'center' }" :barItemStyle="{ textAlign: 'center' }"
			:contentStyle="{ padding: '0 18rpx' }">
			<template v-for="(item, index) in cates" :key="index">
				<uv-vtabs-item :index="index">
					<view class="tn-pt tn-pl-xs tn-pr-xs">
						<uv-text :text="item.name" />
					</view>
					<view class="flex flex-wrap">
						<view class="tn-w-1-2 tn-mt" v-for="(g, i) in item.list" :key="i">
							<view class="flex-y flex-center" @click="goto.goods(g.code)">
								<uv-image :src="g.cover" height="225rpx" width="225rpx" radius="10rpx" :lazy-load="true" />
								<view class="tn-text-sm tn-text-center tn-mt-xs">
									<text class="tn-text-ellipsis-1">{{ g.name }}</text>
									<view class="tn-red_text tn-text-bold">
										<text v-if="Number(g.price_selling) > 0">
											{{ Number(g.price_selling || '') }} 元
										</text>
										<text v-else>免费</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class=tn-pt></view>
				</uv-vtabs-item>
			</template>
		</uv-vtabs>
	</view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaDataBase, TaDataGoods } from '@/utils';

export default defineComponent({
	data() {
		return {
			ccid: <number>0,
			index: <number>0,
			cates: <any[]>[]
		}
	},
	computed: {
		height() {
			return uni.getSystemInfoSync().windowHeight
		}
	},
	onHide() {
		// @ts-ignore
		getApp().globalData.GoodsCateId = 0
	},
	onShow() {
		// @ts-ignore
		this.ccid = getApp().globalData.GoodsCateId || 0
		this.syncCheck()
	},
	onReady() {
		this.loadData()
		TaDataBase.page('商品分类', true)
	},
	onPullDownRefresh() {
		this.loadData()
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		loadData() {
			TaDataGoods.withCate().then((ret: any) => {
				ret.data.cate.unshift({ id: 0, pid: -1, cover: '', name: '全部' })
				ret.data.cate.map((x: any) => x.list = [])
				TaDataGoods.withGoods().then((res: any) => res.data.list.map((g: any) => {
					ret.data.cate[0].list.push(g)
					ret.data.cate.map((c: any) => g.cates.ids.map((id: any) => id === c.id && c.list.push(g)))
					this.cates = ret.data.cate.filter((x: any) => x.list.length > 0)
					this.syncCheck()
				}))
			})
		},
		syncCheck() {
			this.cates.some((x: any, i) => this.ccid == x.id ? this.index = i : null)
			return true
		}
	}
})
</script>

<style scoped lang="scss">
.item {
	padding: 10rpx 20rpx;

	&-title {
		.text {
			color: #111;
			font-size: 32rpx;
			font-weight: 700;
		}
	}

	&-content {
		padding: 20rpx 0;

		.text {
			line-height: 48rpx;
			font-size: 30rpx;
			color: #111;
			/* #ifndef APP-NVUE */
			word-break: break-all;
			/* #endif */
		}
	}
}
</style>